<template>
<div class="header_box">
  <div class="left">
    <div class="title">小义博客 - 管理系统</div>
  </div>
  <div class="right">
    <div class="user">
      <span>当前已登录: {{user?.username}}</span>
    </div>
    <el-button class="logout_btn" type="primary" @click="logout" size="small">退出登录</el-button>
  </div>
</div>
</template>

<script setup>

import {useRouter} from "vue-router";

const router = useRouter()
const user = JSON.parse(window.localStorage.getItem("user"))

const logout = async () => {
  window.localStorage.setItem('token', '')
  window.localStorage.setItem('user', '')
  await router.push('/admin/login')
}
</script>

<style scoped>
.header_box {
  height: 60px;
  display: flex;
  place-items: center;
}

.left {
  flex: 1;
}

.right {
  display: flex;
  align-items: center;
}

.user {
  color: #999999;
}

.logout_btn {
  margin-left: 10px;
}

.title {
  margin: 0;
  font-size: 19px;
}
</style>